A near-monochrome luxury system on white and warm cream, set in the BeoSupreme typeface at airy light weights, with a single deep forest green as its restrained accent — depth comes from photography and whitespace, never from shadow.
Tokens extracted live from bang-olufsen.com. Headline font is Lexend Deca — the brand's own declared fallback for its proprietary BeoSupreme typeface.
Everything is set in BeoSupreme (substituted here with Lexend Deca). The signature move is weight — headings stay at regular 400, never bold, so hierarchy is carried by size and tracking. Eyebrows are small but widely letter-spaced and uppercased.
Product tiles are flat, shadowless photographic frames separated only by hairlines and whitespace — the gallery-wall logic that defines the brand.
Built on an 8px base unit (button padding 8 × 32px), scaling through a calm 4 / 8 / 16 / 24 / 32 / 48 ladder that keeps the layout airy.
Rounding is bimodal: barely-there 3–5px on inputs and utility controls, or fully pill-shaped (40px) for primary and outline CTAs, with circles for icons.
The headline of the whole system: Bang & Olufsen uses no drop shadows at all. Separation is achieved with hairlines, whitespace, and the depth of full-bleed imagery.
| Name | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Product rows collapse to 1–2 columns; nav condenses to a menu; generous vertical rhythm preserved. |
| Tablet | 768–1023px | Two-up product grids; hero imagery stays full-bleed with overlaid pill CTAs. |
| Laptop | 1024–1279px | Four-up grids return; wide horizontal navigation expands. |
| Desktop | ≥ 1280px | Centred max-width column with wide flanking margins and large editorial blocks. |
Across every breakpoint the priority is whitespace and imagery over density — the airy, uncluttered character is what survives, not a particular column count.
Illustrative only — Bang & Olufsen sells products, not subscriptions. These demonstrate the pricing-card pattern in the brand's flat, hairline-bordered style.
Order history rendered in the system's quiet table style — uppercase micro-labels, cream header, hairline rows, and pill status chips.
| Order | Product | Finish | Status | When |
|---|---|---|---|---|
| #BO-4821 | Beosound A1 | Natural | Delivered | Jun 21 |
| #BO-4815 | Beoplay H100 | Infinite Black | Delivered | Jun 18 |
| #BO-4790 | Beosound Theatre | Gold Tone | Processing | Jun 14 |
| #BO-4772 | Beolab 28 | Bronze | In transit | Jun 09 |
| #BO-4759 | Beoplay EX | Anthracite | Delivered | Jun 03 |
Sign-in and registration in the brand's restrained style — light-weight headings, uppercase field labels, pill CTAs, and an outline SSO ghost button.